{% extends base.html %}
{% block body %}

<style type="text/css">
  .dairy-header {
    width: 100%;
    float: left;
  }

  .dairy-header>h2 {
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
  }

  .dairy-option {
    text-align: center;
  }

</style>
  
<div class="card">
  <!-- <h3 class="card-title">天视图</h3> -->

  <div class="dairy-header">
    <h2 id="dateTitle"></h2>

    <div class="dairy-option">
      <a id="prevLink">昨天</a>
      <!-- <a href="{{_server_home}}/note/index">首页</a> -->
      <a id="nextLink">明天</a>
    </div>
  </div>

  <div class="dairy-content">
    <p>今天休息</p>
  </div>

  <div class="dairy-input">
    <textarea class="row"></textarea>
    <button>添加记录</button>
  </div>

</div>

<script type="text/javascript">
$(function() {
  var NOW = new Date();
  var DAY_MS = 24 * 3600 * 1000;

  $("#prevLink").click(function () {
    NOW = new Date(NOW.getTime() - DAY_MS);
    refreshDate(NOW);
  });

  $("#nextLink").click(function () {
    NOW = new Date(NOW.getTime() + DAY_MS);
    refreshDate(NOW);
  });

  function formatNum(month) {
    if (month > 9) {
      return "" + month;
    } else {
      return "0" + month;
    }
  }

  /**
   * 日期转化为字符串， 4位年+2位月+2位日
   */
  function formatDate(date, seperator) {
    seperator = seperator || "-";
    var _year = date.getFullYear();
    var _month = date.getMonth() + 1;    // 月从0开始计数
    var _d = date.getDate();
     
    _month = formatNum(_month);
    _d = formatNum(_d);
    if (seperator) {
      return _year + seperator + _month + seperator + _d;
    } else {
      return _year + _month + _d;
    }
  }
  
  function refreshDate(date) {
    var dateStr = formatDate(date);
    window.location.hash = dateStr;
    $("#dateTitle").text(dateStr);
  }

  if (window.location.hash == "") {
    refreshDate(new Date());
  } else {
    // parse date str.
  }

});
</script>

{% end %}